<script setup lang="ts">
import { ref, reactive } from 'vue'
import { FormInstance } from 'element-plus'
import { useAddActionStore } from '../../store/action/addActionStore';
import uploadImg from '../uploadImg.vue';
import { useImgStore } from '../../store/img';
import UploadImg from '../../api/uploadImg';
// 获取图片数据
const imgStore = useImgStore();
const addActionFormRef = ref<FormInstance>()
//初始化
const addActionForm = reactive({
    id: '',
    actionName: '',
    actionDate: '',
    actionLocation: '',
    actionDetails: '',
    actionPrice: 0,
    actionType: '',
    actionCover: ''
});
const addActionStore = useAddActionStore();
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async (valid) => {
        if (valid) {
            if(imgStore.imgUrl){
                // 先执行上传
                const response = await UploadImg.uploadImg(imgStore.imgRow)
                if (response.data.code === 200) {
                    // 先设置数据再关闭对话框
                    addActionForm.actionCover = response.data.data
                    imgStore.setImgRowNull()
                }
            }
            //addActionStore.addAction(addActionForm);
            //addActionStore.setAddAction(false);
            console.log(addActionForm);
            addActionStore.setAddActionData(addActionForm);
            addActionStore.addAction()
        }
    });
};
</script>
<template>
    <el-dialog v-model="addActionStore.isAddAction" title="添加活动" width="650px" destroy-on-close align-center>
        <el-form ref="addActionFormRef" :model="addActionForm" class="add-action-form">
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="活动名称">
                        <el-input v-model="addActionForm.actionName"></el-input>
                    </el-form-item>

                    <el-form-item label="活动时间">
                        <el-date-picker v-model="addActionForm.actionDate" type="date" placeholder="Pick a day" />
                    </el-form-item>

                    <el-form-item label="活动地点">
                        <el-input v-model="addActionForm.actionLocation"></el-input>
                    </el-form-item>

                    <el-form-item label="活动类型">
                        <el-select v-model="addActionForm.actionType" placeholder="请选择活动类型">
                            <el-option label="社教活动" value="社教活动"></el-option>
                            <el-option label="研学活动" value="研学活动"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="活动详情">
                        <el-input v-model="addActionForm.actionDetails" type="textarea" :rows="5"></el-input>
                    </el-form-item>

                    <el-form-item label="活动封面">
                        <uploadImg />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addActionStore.setAddAction(false)">取消</el-button>
                <el-button type="primary" @click="submitForm(addActionFormRef)">确认添加</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped>
.add-action-form {
    margin-top: 20px;
}
</style>